<template>
    <view class="info">
        <view class="custom-navbar" :style=" { height: paddingHeight + 'px', paddingTop: globalData.paddingTop + 'px' } ">
            <view class="bakc_icon" :style=" { height: globalData.lineHeight + 'px' } ">
                <uni-icons color="#000000" type="back" @click=" _navBack " size="20" />
            </view>
            <view class="navbar-name"
                :style=" { lineHeight: globalData.lineHeight + 'px', height: globalData.lineHeight + 'px' } ">
            </view>
        </view>
        <view class="t_container">
            <view class="t">
                <view class="d_name">
                    测量你的新陈代谢
                </view>
            </view>
        </view>
        <view class="m_container">
            <view class="option" v-for="(item, index) in options" :key=" index " @click="goNextPage(item.tag)">
                <view class="o-t">
                    <u-image width="36rpx" :showMenuByLongpress=" false " height="36rpx" :src=" item.icon "
                        :lazy-load=" true "></u-image>
                    <view class="text">
                        {{ item.type }}
                    </view>
                </view>
                <view class="o-b">
                    {{ item.typeDescribe }}
                </view>
            </view>
            <view class="tips">
                记录您的生活习惯
            </view>
            <view class="option" v-for="(item, index) in life" :key=" index " @click="navigate(item.path)">
                <view class="o-t">
                    <u-image width="36rpx" :showMenuByLongpress=" false " height="36rpx" :src=" item.icon "
                        :lazy-load=" true "></u-image>
                    <view class="text">
                        {{ item.text }}
                    </view>
                </view>
                <view class="o-b">
                    {{ item.tips }}
                </view>
            </view>
            <!-- <view class="tips">
                如何测量
            </view>
            <view class="option" v-for="(item, index) in course" :key=" index ">
                <view class="o-t">
                    <u-image width="36rpx" :showMenuByLongpress=" false " height="36rpx" :src=" item.icon "
                        :lazy-load=" true "></u-image>
                    <view class="text">
                        {{ item.text }}
                    </view>
                </view>
                <view class="o-b">
                    {{ item.tips }}
                </view>
            </view> -->
        </view>
    </view>
</template>

<script>
import {
    getTag,
    findSleepDayRecord
} from '@/api/index.js'
let app = getApp()
export default {
    data () {
        return {
            paddingHeight: uni.getStorageSync('navbarHeight'),
            userId: uni.getStorageSync("userId"),
            globalData: app.globalData,
            type: '',
            options: [],
            life: [{
                text: '饮食',
                tips: '记录您的日常饮食摄入',
                icon: 'http://oss.antaimedical.com/images/static/2024/06/6673cdcbeb14d0f049f44d21OFLe7lOpXZdN252954d15246a3fcdee0f4ca53850b22.png',
                path: '/pagesA/health/diet/index'
            }, {
                text: '运动',
                tips: '记录您的日常锻炼',
                icon: 'http://oss.antaimedical.com/images/static/2024/06/6673cdbbeb14d0f049f44d206z2fj6sHAv6Qc76c9d46a84573a19ba388c137140eb1.png',
                path: '/pagesA/health/campaign/index'
            }, {
                text: '睡眠',
                tips: '记录您每天的睡眠时间',
                icon: 'http://oss.antaimedical.com/images/static/2024/01/65a895e011e9028d36a2b5a1icon07.png',
                path: '/pagesA/health/sleep/sleepIndex'
            },],
            course: [{
                text: '看看它是怎么做的',
                tips: '熟悉该技术',
                icon: 'http://oss.antaimedical.com/images/static/2024/06/6673cda1eb14d0f049f44d1ePBO3qiOqJMBt34227fc38bd5354a9c29cf3caa577732.png'
            },
            {
                text: '练习',
                tips: '掌握测量技能',
                icon: 'http://oss.antaimedical.com/images/static/2024/06/6673cdaeeb14d0f049f44d1f5KRlqxwoTKycc3e7db40bddf6a6f26bcdc6e93d927ba.png'
            }
            ],
            hasSleep: false, // 是否有睡眠记录数据
        }
    },
    onLoad (OPTIONS) {
        this.fetchData()
    },
    onShow () {
        this.fetchSleepData()
    },
    methods: {
        // 拉取数据
        async fetchData () {
            uni.showLoading({
                title: '加载中...'
            })
            let params = {
                userId: this.userId,
                urlencoded: true
            }
            try {
                const res = await getTag(params)
                uni.hideLoading()
                if (res.code == 200) {
                    this.options = res.data.filter(item => {
                        return item.tag !== 6 && item.tag !== 9 && item.tag !== 10 && item.tag !== 11
                    })
                }
            } catch (e) {
                //TODO handle the exception
                uni.hideLoading({
                    fail () { }
                })
            }
        },
        async fetchSleepData () {
            let params = {
                userId: this.userId
            }
            try {
                const res = await findSleepDayRecord(params)
                if (res.code == 200) {
                    if (!res.data) { // 无记录为添加
                        this.hasSleep = false
                    } else { // 有记录修改
                        this.hasSleep = true
                    }
                }
            } catch (e) {
                //TODO handle the exception
            }
        },
        navigate (url) {
            uni.navigateTo({
                url
            })
        },
        goNextPage (tag) {
            if (tag == 4 || tag == 5) {
                uni.navigateTo({
                    url: `/pagesA/health/device/info/diet/index?tag=${tag}&type=measure`
                })
            }else{
                uni.redirectTo({
					url: `/pagesA/health/device/connect/index?tag=${tag}`
				})
            }
            // if (tag == 1) {
            //     if (this.hasSleep) {
            //         uni.navigateTo({
            //             url: `/pagesA/health/device/info/sleep/index?tag=${tag}`
            //         })
            //     } else {
            //         uni.navigateTo({
            //             url: `/pagesA/health/device/info/sleep/details?status=current`
            //         })
            //     }
            // } else if (tag == 2 || tag == 3) {
            //     uni.navigateTo({
            //         url: `/pagesA/health/device/info/campaign/index?tag=${tag}`
            //     })
            // } else if (tag == 4 || tag == 5) {
            //     uni.navigateTo({
            //         url: `/pagesA/health/device/info/diet/index?tag=${tag}&type=measure`
            //     })
            // } else if (tag == 7 || tag == 8) {
            //     uni.navigateTo({
            //         url: `/pagesA/health/device/connect/index?tag=${tag}`
            //     })
            // }
        },
        _navBack () {
            uni.navigateBack()
        }
    }
}
</script>
<style lang="scss" scoped>
.t_container {
    height: 632rpx;
    padding: 214rpx 46rpx 0 80rpx;
    background-image: url('https://antaimedical.com:7000/img/ico/at/20230904/1693808227124.png');
    background-size: 100% 100%;
    color: #fff;

    .t {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .d_name {
        padding-top: 74rpx;
        font-size: 36rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
    }

    .close {
        width: 30rpx;
        height: 30rpx;
    }
}

.m_container {
    width: 100%;
    background-color: #fff;
    border-radius: 128rpx 0rpx 0rpx 0rpx;
    margin-top: -204rpx;
    padding: 64rpx 80rpx;

    .option {
        width: 100%;
        height: 148rpx;
        background: #FAFAFA;
        border-radius: 12rpx;
        margin-bottom: 16rpx;
        padding: 32rpx 48rpx;

        .o-t {
            display: flex;
            align-items: center;

            .text {
                padding-left: 16rpx;
                font-size: 32rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
            }
        }

        .o-b {
            padding: 4rpx 0 0 52rpx;
            font-size: 28rpx;
            color: #666666;
            line-height: 40rpx;
            text-align: left;
        }
    }

    .tips {
        padding: 32rpx 0 16rpx 0;
        font-size: 32rpx;
        color: #666666;
        text-align: left;
    }
}
</style>